<template>
  <div class="page-content">
    <binTable
      :tableColumnProps="tableColumnProps"
      :listData="pageList"
      :listCount="pageListCount"
      v-model:page="pageInfo"
    >
      <!-- 课程类型 -->
      <template #type="scope">
        <el-tag :type="scope.row.type === 1 ? 'warning' : ''">
          {{ scope.row.type === 1 ? '主修' : '选修' }}
        </el-tag>
      </template>
      <!-- 选课限制 -->
      <template #choose_limit="scope">
        <el-tag
          effect="plain"
          :type="
            scope.row.choose_limit === 1 ? 'warning' : scope.row.choose_limit === 2 ? 'success' : ''
          "
        >
          {{
            scope.row.choose_limit === 1
              ? '同院系'
              : scope.row.choose_limit === 2
              ? '同专业'
              : '无限制'
          }}
        </el-tag>
      </template>
      <!-- 课程状态 -->
      <template #state="scope">
        <el-switch
          v-model="scope.row.state"
          style="--el-switch-off-color: #ff4949"
          class="ml-2"
          inline-prompt
          active-text="启"
          inactive-text="禁"
          @change="handleSwitch(scope.row)"
        />
      </template>
      <template #chhoose_num="scope">
        <span style="color: red">
          {{ Number(scope.row.num_limit) - Number(scope.row.remaining) }}
        </span>
      </template>
      <!-- 剩余可选人数 -->
      <template #remaining="scope">
        <span style="color: red">{{ scope.row.remaining }}</span>
      </template>
    </binTable>
  </div>
</template>

<script setup>
import { Delete, Edit } from '@element-plus/icons-vue'
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'
import binTable from '@/base-ui/table'
import { binMsg } from '@/global/api.js'
import { numToClassTime } from '@/utils/utils.js'

const props = defineProps({
  // table 的配置文件
  tableColumnProps: {
    type: Object,
    required: true
  },
  // 当前页面所属
  pageName: {
    type: String,
    required: true
  },
  moduleName: {
    type: String,
    required: true
  }
})

const store = useStore()

// 转递给 table 组件的分页数据
const pageInfo = ref({
  page_num: 1,
  page_size: 10
})
const emit = defineEmits(['pageInfoChange'])

// 当页数发生变化，就通知父组件查询数据
watch(
  () => pageInfo.value,
  (newVal) => {
    emit('pageInfoChange', newVal)
  },
  {
    immediate: true
  }
)

// 数据列表
const pageList = computed(() => store.state.lessonManageModule.courseCaseList)
// 数据列表数量
const pageListCount = computed(() => store.state.lessonManageModule.courseCaseCount)

// 刷面刷新，第一次根据name（空值）进行查询，后面则根据查询条件和分页参数进行查询
const getPageList = async (formValue, pageInfo) => {
  binMsg().closeAll()
  // 查找用户数据
  store.dispatch(`${props.moduleName}/searchCaseAction`, {
    pageName: props.pageName,
    ...formValue,
    ...pageInfo
  })
}

defineExpose({
  getPageList
})
</script>

<style lang="less" scoped>
.userDetail {
  .avatar {
    margin-top: 15px;
  }
  .info {
    font-size: 16px;
    margin-left: 50px;
  }
}
</style>
